<template>
  <view
    class="status-bar-com-page"
    v-if="prop.showStatusBar"
    :style="state.style"
  >
  </view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, onMounted, defineProps } from "vue";
const { proxy } = getCurrentInstance();
const prop = defineProps({
  // 是否显示状态栏
  showStatusBar: {
    type: Boolean,
    default: true,
  },
  // 字体颜色
  color: {
    type: String,
    default: "#000000",
  },
  // 背景色
  backgroundColor: {
    type: String,
    default: "transparent",
  },
});
const state = reactive({
  style: {},
});
onMounted(() => {
  handleStyle();
});
const handleStyle = () => {
  // #ifdef MP-WEIXIN
  const systemMenuBtn = proxy.$config.systemMenuBtn();
  state.style = {
    height: `${systemMenuBtn.top}px`,
    backgroundColor: prop.backgroundColor,
  };
  // #endif
  // #ifndef MP-WEIXIN
  const systemInfo = proxy.$config.systemInfo();
  state.style = {
    height: `${systemInfo.statusBarHeight}px`,
    backgroundColor: prop.backgroundColor,
  };
  // #endif
  uni.setNavigationBarColor({
    frontColor: prop.color,
    backgroundColor: prop.backgroundColor,
  });
};
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.status-bar-com-page {
  width: 750rpx;
}
</style>
